<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <%--<link href="css/register.css" rel="stylesheet">--%>
    <style>
        body{
            background-image: url("img/background.jpg");
        }
    </style>
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="user-login.jsp">登录</a>
    </div>
    <%--提交到通过用户名查找用户的页面--%>
    <form id="reg-form" action="selectUserByName" method="post" onsubmit="return checkAll();">

        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">                                                              <%--失去焦点时自动监测用户名是否符合要求--%>
                    <input name="name" type="text" id="name" placeholder="请输入4-10位任意字符的用户名" onblur="checkUserName()">
                    <span id="message" style="color: red;font-size: 10px"></span>
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="passWord" type="password" id="passWord" placeholder="请输入6-10位数字或字母为密码" onblur="checkPassWord()">
                    <span id="password_err" class="err_msg" style="color: red;font-size: 10px"></span>
                </td>
            </tr>


        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>

</div>
</body>
</html>
<script>
    onload = function (){
        if(${success==1}){
            alert("注册成功")
            //转到登录页面
            location.href = "user-login.jsp";
        }else if(${success==0}){
            alert("用户名已存在注册失败!")
        }
    }
    //检查用户名
    function checkUserName() {
        //用户名4-10个任意
        //创建正则表达式
        let name = /.{4,10}/;
        //获得用户输入的用户名
        let userName = document.getElementById("name").value;
        //判断
        if(name.test(userName)){
            //符合要求后面显示一个勾
            document.getElementById("message").innerHTML = '<img src="img/gou2.png" height="10px">'
            return true;
        }else {
            document.getElementById("message").innerText = "用户名不符合要求";
            return false;
        }
    }
    //检查密码
    function checkPassWord(){
        //创建正则表达式
        let passWord = /[0-9a-zA-Z]{6,10}/
        let userPassWord = document.getElementById("passWord").value;
        let pwm = document.getElementById("password_err");
        //验证
        if(passWord.test(userPassWord)){
            //验证正确
            pwm.innerHTML = '<img src="img/gou2.png" height="10px">';
            return true;
        }else {
            //验证失败
            pwm.innerText = "密码不符合要求";
            return false;
        }

    }
    //检查用户名和密码
    function checkAll() {
        return checkPassWord() && checkUserName();
    }
</script>